<template>
	<view>
		<!-- 商品信息 -->
		<view class="content-view">
			<view class="item-info-view" @click="productDetail">
				<image class="item-info-image" src="https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/image3.png" mode="aspectFill"></image>
				<view class="item-info-content util-font-regular">
					<view class="item-info-name util-font-medium">{{data.merProduct.name}}</view>
					<view class="item-info-number">数量：{{data.number}}</view>
					<view class="item-info-amount util-font-medium">
						<text class="item-info-amount-price1">总价：</text>
						<text class="item-info-amount-price2">￥</text>
						<text class="item-info-amount-price3">{{data.amount/100.}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="content-view">
			<view class="content-title util-font-medium">
				商家信息
			</view>
			<view class="mer-info-view">
				<view class="mer-info">
					<view class="mer-name util-font-medium">{{data.merMerchant.name}}</view>
					<view class="mer-address util-font-regular" @click="merAddress">
						<image class="mer-address-image" src="../../static/index/icon_address.png" mode="aspectFit"></image>
						<text class="mer-address-text util-font-regular" style="margin-left: 15upx;">{{data.merMerchant.address}}</text>
					</view>
				</view>
				<view class="mer-phone-view" @click="merPhone">
					<view class="mer-phone-content">
						<view class="mer-phone-title util-font-regular">预约电话</view>
						<image class="mer-phone-image" src="../../static/index/phone.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="content-view">
			<view class="content-title util-font-medium">
				订单信息
			</view>
			<view class="order-info-content">
				<view class="row">
					<view class="row-title util-font-regular">订单编号</view>
					<view class="row-text util-font-regular">{{data.orderNo}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">下单时间</view>
					<view class="row-text util-font-regular">{{data.createTime}}</view>
				</view>
				<view v-if="data.status != 0 && data.status != 4" class="row">
					<view class="row-title util-font-regular">付款时间</view>
					<view class="row-text util-font-regular">{{data.payTime}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">核销时间</view>
					<view class="row-text util-font-regular">{{data.verifyTime}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">数量</view>
					<view class="row-text util-font-regular">{{data.number}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">总价</view>
					<view class="row-text util-font-regular">{{data.amount/100.}}元</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">使用红包</view>
					<view class="row-text util-font-regular">{{data.redPacketMoney/100.}}元</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">实付金额</view>
					<view class="row-text util-font-regular">{{data.payment/100.}}元</view>
				</view>
			</view>
			<view class="order-button-view">
				<button class="order-button-service" type="default" open-type="contact">
					<image class="order-button-image" src="../../static/order/order_service.png" mode="aspectFit"></image>
					<text class="order-button-text util-font-regular">联系客服</text>
				</button>
				<view class="order-button-copy" @click="copyOrderNo">
					<image class="order-button-image" src="../../static/order/order_copy.png" mode="aspectFit"></image>
					<text class="order-button-text util-font-regular">复制订单编号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				isActivity: 0,
				data: null,

				timer: null,
				timerString: '',
				isTimerReload: false,
				


			}
		},
		onLoad(options) {
			var that = this
			uni.$on('orderDetailRefresh', function() {
				that.loadData(false)
			})

			this.id = options.id
			this.loadData()
		},
		methods: {
			loadData: function() {
				var that = this
				that.sendRequest({
					url: 'app/ordOrders/info/' + that.id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: res => {
						console.log(res)
						that.data = res.data.data
					},
				})
			},
			productDetail: function(){
				var that = this
				uni.navigateTo({
					url: '../index/detail?pid=' + that.data.merProduct.id
				})
			},
			toUse: function(){
				var that = this
				uni.navigateTo({
					url: './code?oid=' + that.id
				})
			},
			copyCode: function(){
				var that = this
				uni.setClipboardData({
					data: that.data.verifyCode,
					success() {
						console.log('消费码已添加到剪贴板')
					}
				})
			},
			merAddress: function() {
				var that = this
				const latitude = parseFloat(that.data.merMerchant.lat);
				const longitude = parseFloat(that.data.merMerchant.lng);
				uni.openLocation({
				    latitude: latitude,
				    longitude: longitude,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			merPhone: function(){
				var that = this
				uni.makePhoneCall({
					phoneNumber: that.data.merMerchant.phone
				})
			},
			copyOrderNo: function(){
				var that = this
				uni.setClipboardData({
					data: that.data.orderNo,
					success: function() {
						// #ifdef H5
						uni.showToast({
							icon: "none",
							title: "订单号已复制到您的剪贴板",
							success() {
				
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	/* 订单状态 */
	.status-view {
		width: 690rpx;
		margin: 40rpx 30rpx 20rpx;
	}

	.status-title-view {
		width: 690rpx;
		height: 64rpx;
	}

	.status-title {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 46rpx;
		color: #333333;
		float: left;
	}

	.status-button {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #bbbbbb;
		float: right;
	}

	.payment-time-view {
		width: 690rpx;
		height: 30rpx;
		margin: 10rpx 0 30rpx;
	}

	.payment-time-image {
		width: 35rpx;
		height: 35rpx;
		float: left;
	}

	.payment-time-title {
		height: 35rpx;
		line-height: 35rpx;
		color: #666666;
		font-size: 24rpx;
		float: left;
		margin-left: 10rpx;
	}

	.payment-time-text {
		height: 35rpx;
		line-height: 35rpx;
		color: #f1a441;
		font-size: 28rpx;
		float: left;
		margin-left: 10rpx;
	}

	/* 内容view */
	.content-view {
		width: 650rpx;
		margin: 20rpx;
		padding: 30rpx;
		background-color: white;
		border-radius: 15rpx;
	}
	.content-title {
		width: 690upx;
		font-size: 32upx;
		height: 35upx;
		line-height: 35upx;
		margin-bottom: 20upx;
		color: #333333;
	}

	/* 商品信息 */
	.item-info-view {
		width: 100%;
		height: 144upx;
		overflow: hidden;
	}
	.item-info-image {
		width: 180upx;
		height: 144upx;
		float: left;
		border-radius: 10upx;
	}

	.item-info-content {
		width: 440upx;
		height: 144upx;
		margin-left: 30upx;
		float: left;
	}

	.item-info-name {
		color: #333333;
		font-size: 30upx;
		height: 50upx;
		line-height: 50upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.item-info-number {
		color: #999999;
		font-size: 26upx;
		height: 50upx;
		line-height: 50upx;
	}

	.item-info-amount {
		height: 44upx;
		line-height: 44upx;
	}

	.item-info-amount-price1 {
		color: #666666;
		font-size: 28upx;
	}

	.item-info-amount-price2 {
		color: #ea6431;
		font-size: 24upx;
		position: relative;
		top: -2rpx;
	}

	.item-info-amount-price3 {
		color: #ea6431;
		font-size: 36upx;
	}
	.price-brokerage {
		padding: 0upx 8upx 0upx;
		background-color: #ec6e2d;
		height: 30upx;
		line-height: 30upx;
		border-radius: 6upx;
		color: #FFFFFF;
		font-size: 20upx;
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}
	
	/* 核销码 */
	.time-view {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.code-vew {
		width: 650rpx;
		height: 60rpx;
		position: relative;
		top: 10rpx;
		margin-top: 20rpx;
	}
	.code-text {
		height: 60rpx;
		line-height: 60rpx;
		color: #ea6431;
		font-size: 40rpx;
		float: left;
	}
	.code-button {
		width: 138rpx;
		height: 50rpx;
		color: #ea6431;
		font-size: 28rpx;
		border: 2rpx solid #ea6431;
		border-radius: 30rpx;
		line-height: 50rpx;
		float: right;
		text-align: center;
		margin-top: 5rpx;
	}
	
	/* 商家信息 */
	.mer-info-view {
		width: 650rpx;
		/* height: 90rpx; */
		margin-top: 40rpx;
	}
	.mer-info {
		width: 530rpx;
		display: inline-block;
		/* height: 90rpx; */
		/* float: left; */
	}
	.mer-name {
		width: 500rpx;
		height: 40rpx;
		line-height: 40rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #333333;
	}
	.mer-address {
		width: 500rpx;
		/* height: 40rpx; */
		line-height: 40rpx;
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	.mer-address-image {
		width: 25upx;
		height: 25upx;
		position: relative;
		top: 5upx;
	}
	
	.mer-address-text {
		height: 40upx;
		line-height: 40upx;
		font-size: 24rpx;
		color: #666666;
	}
	
	.mer-phone-view {
		width: 120upx;
		height: 90upx;
		display: inline-block;
		/* float: right; */
		padding-top: 1upx;
	}
	
	.mer-phone-content {
		margin-top: 18upx;
		width: 120upx;
		height: 55upx;
		border-left: 2upx dashed #999999;
	}
	
	.mer-phone-title {
		color: #f1a441;
		font-size: 20upx;
		width: 50upx;
		height: 55upx;
		overflow: hidden;
		float: right;
	}
	
	.mer-phone-image {
		width: 45upx;
		height: 45upx;
		margin: 5upx 8upx;
		float: right;
	}

	/* 订单信息 */
	.order-info-content
	{
		width: 100%;
		margin-top: 30rpx;
	}
	.row {
		width: 100%;
		height: 44upx;
		line-height: 44upx;
	}

	.row-title {
		color: #999999;
		font-size: 24upx;
		height: 44upx;
		line-height: 44upx;
		float: left;
	}

	.row-text {
		color: #666666;
		font-size: 24upx;
		height: 44upx;
		line-height: 44upx;
		float: right;
	}
	
	.order-button-view {
		width: 650rpx;
		height: 55rpx;
		margin-top: 20rpx;
	}
	.order-button-service {
		width: 305rpx;
		height: 35rpx;
		padding: 10rpx;
		text-align: center;
		float: left;
	}
	button {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
		box-sizing: content-box;
	}
	button.order-button-service {
		background-color: rgba(0, 0, 0, 0);
		line-height: 40upx;
		position: relative;
		margin: 0;
	}
	
	button::after {
		border: 0upx;
	}
	.order-button-copy {
		width: 305rpx;
		height: 35rpx;
		padding: 10rpx;
		text-align: center;
		float: right;
	}
	.order-button-image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
	.order-button-text {
		font-size: 26rpx;
		color: #333333;
		height: 30rpx;
		line-height: 30rpx;
		margin-left: 10rpx;
	}

	/* 底部按钮 */
	.custom-footer-button-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140upx;
		background: #FFFFFF;
	}

	.safeAreaInsetsBottom {
		padding-bottom: 20upx;
	}

	.custom-footer-button-border {
		background-color: #F1F1F1;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 2upx;
	}

	.custom-footer-button-item {
		width: 650upx;
		height: 96upx;
		line-height: 96upx;
		background: linear-gradient(to right, #eb8735, #ea6431);
		text-align: center;
		color: white;
		font-size: 36upx;
		border-radius: 48upx;
		margin: 36upx 50upx 36upx 0;
		float: right;
	}

	.custom-footer-button-item1 {
		width: 180upx;
		height: 68upx;
		line-height: 68upx;
		text-align: center;
		color: #ea6431;
		font-size: 30upx;
		border-radius: 34upx;
		border: 2upx solid #ea6431;
		box-sizing: border-box;
		margin: 36upx 30upx;
		float: right;
	}
</style>
